<template>
  <el-form :model="collectionForm" class="collectionForm">
    <el-form-item>
      <el-col :span="2" style="text-align: end">
        <label>{{ collectionForm.name }}</label>
      </el-col>
      <el-col :span="22">
        <el-col :span="24">
          <el-radio v-model="collectionForm.recoveryFlatExpressType" label="0" :disabled="disabled">物流回收</el-radio>
        </el-col>
        <el-col :span="24">
          <el-col :span="4">
            <el-select v-model="collectionForm.recoveryExpress" placeholder="请选择" :disabled="disabled ||(!disabled&&collectionForm.recoveryFlatExpressType=='1')">
              <el-option
                label="顺丰"
                value="0"
              >
                顺丰
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              ref="freightCityId"
              v-model="collectionForm.recoveryModelExpressId"
              :disabled="disabled ||(!disabled&&collectionForm.recoveryFlatExpressType=='1')"
              placeholder="选择运费模板"
              style="width:200px"
              @focus="showDialogYF(0)"
            >
              <el-option
                v-for="item in YFOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-radio v-model="collectionForm.recoveryFlatExpressType" label="1" :disabled="disabled">同城自营回收</el-radio>
        </el-col>
        <el-col :span="24">
          <el-col :span="6">
            <el-select
              ref="freightCityId"
              v-model="collectionForm.recoveryModelCityExpressId"
              :disabled="disabled ||(!disabled&&collectionForm.recoveryFlatExpressType=='0')"
              placeholder="选择运费模板"
              style="width:200px"
              @focus="showDialogYF(1)"
            >
              <el-option
                v-for="item in YFCityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-col>
      </el-col>
    </el-form-item>
    <AddExpressModel
      ref="AddExpressModel"
      :visible="collectionVisible"
      @getYFList="getYFOptions"
      @getYFCityList="getYFCityOptions"
      @getSelectYFModel="getSelectYFModel"
      @handelClose="handelCollectionClose"
    />
  </el-form>
</template>

<script>
import AddExpressModel from '@/components/AddExpressModel'
import { freightTemplateList } from '@/views/shop/api/FreightTemplate'
export default {
  name: 'CloudStoreExpress',
  components: { AddExpressModel },
  props: {
    collection: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      collectionForm: {
        id: null,
        name: null,
        recoveryFlatExpressType: '0',
        recoveryExpress: '0',
        recoveryModelCityExpressId: null,
        recoveryModelExpressId: null
      },
      expressType: 0,
      collectionVisible: false,
      YFOptions: [],
      YFCityOptions: [],
      disabled: false
    }
  },
  created() {
    this.collectionForm.id = this.collection.id
    this.collectionForm.name = this.collection.name
  },
  methods: {
    showDialogYF(number) {
      this.collectionVisible = true
      if (number == 0) {
        this.collectionForm.recoveryModelCityExpressId = null
      } else if (number == 1) {
        this.collectionForm.recoveryModelExpressId = null
      }
      this.$refs.AddExpressModel.setYFType(number)
      this.$refs.AddExpressModel.resetYF()
      this.expressType = number
    },
    changeDisabled(disabled) {
      this.disabled = disabled
    },
    getYFOptions(list) {
      this.YFOptions = list
    },
    getYFCityOptions(list) {
      this.YFCityOptions = list
    },
    getSelectYFModel(data) {
      if (this.expressType == 0) {
        this.collectionForm.recoveryModelExpressId = data.id
      } else if (this.expressType == 1) {
        this.collectionForm.recoveryModelCityExpressId = data.id
      }
    },
    handelCollectionClose() {
      this.collectionVisible = false
    },
    setData(list) {
      if (list.length > 0) {
        list.forEach(item => {
          if (item.id == this.collection.id) {
            if (item.recoveryFlatExpressType == 0) {
              this.collectionForm.recoveryFlatExpressType = '0'
              console.log(item)
              const firstData = {
                shopId: localStorage.getItem('shopId'),
                type: 0,
                page: 1,
                limit: 0
              }
              freightTemplateList(firstData).then(res => {
                this.YFOptions = []
                res.data.data.data.forEach(item => {
                  this.YFOptions.push({
                    value: item.id,
                    label: item.name
                  })
                })
                console.log(this.YFOptions)
                this.collectionForm.recoveryModelExpressId = item.recoveryModelExpressId
              })
              this.collectionForm.recoveryExpress = item.recoveryExpressId.toString()
            } else if (item.recoveryFlatExpressType == 1) {
              this.collectionForm.recoveryFlatExpressType = '1'
              const secondData = {
                shopId: localStorage.getItem('shopId'),
                type: 1,
                page: 1,
                limit: 0
              }
              freightTemplateList(secondData).then(res => {
                this.YFCityOptions = []
                res.data.data.data.forEach(item => {
                  this.YFCityOptions.push({
                    value: item.id,
                    label: item.name
                  })
                })
                console.log(this.YFCityOptions)
                this.collectionForm.recoveryModelCityExpressId = item.recoveryModelExpressId
              })
            }
          }
        })
      }
    },
    getAllExpressList(number) {

    },
    changeRecoveryExpressCost() {
      this.collectionForm.recoveryExpressCost = this.collectionForm.recoveryExpressCost.replace(/[^0-9.]/g, '')
    },
    changeRecoveryByselfCost() {
      this.collectionForm.changeRecoveryByselfCost = this.collectionForm.changeRecoveryByselfCost.replace(/[^0-9.]/g, '')
    },
    getData() {
      if (!this.collectionForm.recoveryFlatExpressType) {
        return this.$message.error('请选择回收方式')
      }
      if (this.collectionForm.recoveryFlatExpressType == '0') {
        if (!this.collectionForm.recoveryExpress) {
          return this.$message.error('请选择回收物流公司')
        }
        if (!this.collectionForm.recoveryModelExpressId) {
          return this.$message.error('请选择回收运费模板')
        }
      } else if (this.collectionForm.recoveryFlatExpressType == '1') {
        if (!this.collectionForm.recoveryModelCityExpressId) {
          return this.$message.error('请选择回收运费模板')
        }
      }
      const data = this.$XEUtils.clone(this.collectionForm, true)
      delete data.name
      let recoveryModelExpressId = null
      if (data.recoveryFlatExpressType == '0') {
        recoveryModelExpressId = data.recoveryModelExpressId
      } else if (data.recoveryFlatExpressType == '1') {
        recoveryModelExpressId = data.recoveryModelCityExpressId
      }
      delete data.recoveryExpress
      delete data.recoveryModelExpressId
      delete data.recoveryModelCityExpressId
      data['recoveryExpressId'] = data.recoveryExpress
      data['recoveryModelExpressId'] = recoveryModelExpressId
      return data
    }
  }
}
</script>

<style lang="scss" scoped>
.collectionForm {
  .el-form-item__content {
    margin-left: 0;
  }
}
</style>
